// 基于 fetch 实现一个手动发送请求的 hooks -> useManualFetch

// 返回 [data, loading, error, send]

// 默认请求不发送，调用 send 手动触发请求

// 同时支持 get、post 请求

// 实现分页怎么设计

interface UseManualFetchProps {
  api: string;
  method?: 'get' | 'post';
  params?: any;
}

// 基于 fetch 实现一个手动发送请求的hooks -> useManualFetch
// 默认请求不发送，调用 send 手动触发请求
// 同时支持 get、post 请求
// 进阶  实现分页功能


const useManualFetch = (props: UseManualFetchProps) => {
  const { api, method = 'get', params } = props;
  const [data, setData] = useState<any | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const send = async () => {
    setLoading(true);
    setError(null);

    try {
      let response;
      if (method === 'get') {
        response = await fetch(api);
      } else if (method === 'post') {
        response = await fetch(api, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(params),
        });
      }

      if (!response.ok) {
        throw new Error(`HTTP Error! Status: ${response.status}`);
      }

      const responseData = await response.json();
      setData(responseData);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return [data, loading, error, send];
};

const [data, loading, error, send] = useManualFetch({
  api: '/xxx',
  method: 'get',
  params: {
    id: 1,
  },
});

send(); // 首次触发请求发出
